<template>
  <div class="list-item-container">
    <div v-if="type === 1 || type === 2 || type === 0" class="item" :class="type === 1 ? 'left-img' : 'right-img'">
      <div class="item-txt">
        <h3>
          呵护“心家园”，激发“心动力”—— 2021年度上海金融系统职场“心理加油站”系列课程
        </h3>
        <div class="space">
          <div class="time">09:21</div>
          <div class="space-right">
            <span>
              <i class="iconfont icon-guankan" />
              2909
            </span>
            <span>
              <i class="iconfont icon-dianzan" />
              2909
            </span>
          </div>
        </div>
      </div>
      <img v-if="type !== 0" class="item-img" src="http://www.source.hljgh.org.cn:31001/group1/M00/0B/FB/CoJnS2CwSFiAFJrqAAIj6WldXYw61.jpeg">
    </div>

    <div v-if="type === 3 || type === 4" class="item-single">
      <h3>由承销保荐公司主承销的“光迅科技”非公开发行股票项目成功上市</h3>
      <img v-if="type === 3" class="item-img" src="https://nimg.ws.126.net/?url=http%3A%2F%2Fcms-bucket.ws.126.net%2F2021%2F0601%2F73521427j00qu03fn002lc000s600e3c.jpg&thumbnail=706x352&quality=85&type=jpg">
      <div v-else class="img-group">
        <div class="img-box">
          <img src="https://inews.gtimg.com/newsapp_ls/0/13594936194_295195/0" alt="">
        </div>
        <div class="img-box">
          <img src="https://inews.gtimg.com/newsapp_ls/0/13594936194_295195/0" alt="">
        </div>
        <div class="img-box">
          <img src="https://inews.gtimg.com/newsapp_ls/0/13594936194_295195/0" alt="">
        </div>
      </div>
      <div class="space">
        <div class="time">09:21</div>
        <div class="space-right">
          <span>
            <i class="iconfont icon-guankan" />
            2909
          </span>
          <span>
            <i class="iconfont icon-dianzan" />
            2909
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListItem',
  props: {
    type: {
      type: Number,
      default: 2 // （0:无图,1:左图右文,2:左文右图,3:单幅长图,4:三张多图）
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item-container {
  padding: 10px 16px;
  &+.list-item-container {
    margin-top: 10px;
  }
  .item-img {
    border-radius: 4px;
  }
  .space {
    display: flex;
    height: 24px;
    line-height: 24px;
    color: #ADAFB1;
    font-size: 12px;
    .time {
      flex: 1;
      text-align: left;
    }
    .space-right {
      span {
        margin-right: 20px;
      }
    }
  }
  .item {
    display: flex;
    &.left-img {
      flex-direction: row-reverse;
      .item-img {
        margin-right: 20px;
      }
    }
    &.right-img {
      flex-direction: row;
      .item-img {
        margin-left: 20px;
      }
    }
    .item-txt {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3 {
        text-align: left;
        color: #23222d;
        font-weight: 700;
        line-height: 28px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        margin: 0;
        font-size: 15px;
        -webkit-line-clamp: 2;
      }
    }
    .item-img {
      width: 115px;
      height: 95px;
    }
  }
  .item-single {
    display: flex;
    flex-direction: column;
    h3 {
      text-align: left;
      color: #23222d;
      font-weight: 700;
      line-height: 28px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      margin: 0;
      font-size: 15px;
    }
    .item-img {
      margin-top: 10px;
    }
    .space {
      margin-top: 10px;
    }
    .img-group {
      width: 100%;
      display: flex;
      margin-top: 10px;
      .img-box {
        flex: 1;
        img {
          width: 100%;
          border-radius: 4px;
          display: inherit;
        }
        &+.img-box {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
